<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'
import yhqxService from '@/api/yhqx'
import { ElMessage, ElMessageBox } from 'element-plus'
import pinyin from 'pinyin-match'
import { useMainStore } from '@/store/main'
import lodash from 'lodash'
import TreeUtilDTO from '@/utils/tree'
const userInfo = useMainStore().userInfo
const gNcolumns = [
  {
    title: '功能名称',
    dataIndex: 'qxzymc',
  },
  {
    title: '权限编辑器名称',
    dataIndex: 'qxbjqmc',
  },
  {
    title: '功能来源',
    dataIndex: 'gnlymc',
  },
]

const columns = [
  {
    title: '功能分类',
    dataIndex: 'gnfl',
  },
  {
    title: '功能名称',
    dataIndex: 'gnmc',
  },
]

const sJcolumns = [
  {
    title: '角色名称/条线名称',
    dataIndex: 'mc',
  },
  {
    title: '授权条线中的下级院部门',
    dataIndex: 'sfglxjymc',
  },
  {
    title: '权限来源',
    dataIndex: 'qxlxmc',
  },
]

const pzfs = ref('user')
const pzfs1 = ref('user')
const checkJsData = ref<string[]>([])
const checkJsData1 = ref<string[]>([])
const searchRyVal = ref('')
const searchJsVal = ref('')
const activeKey = ref<any[]>([])
const activeTabKey = ref('1')
const activeKey1 = ref<any[]>([])

const data = ref<any[]>([]) //复选框选中  弹框右边展示的数据

const sqdxLists = ref<any[]>([]) //授权对象
const arr1 = ref<any[]>([]) //逻辑判断 控制样式
const arr2 = ref<any[]>([]) //逻辑判断
const sqdxListsDia = ref<any[]>([])
const arr1Dia = ref<any[]>([]) //逻辑判断 控制样式
const arr2Dia = ref<any[]>([]) //逻辑判断
const yhQxList = ref<any[]>([]) //菜单权限表格
const anqxList = ref<any[]>([]) //已分配按钮权限
const sjKeys = ref<any[]>([]) //数据权限
const showAdd = ref(false) //添加功能弹框显示

const replaceFields = {
  children: 'children',
  label: 'qxzymc',
}
const addGnTree = ref<any[]>([])
const addGnTree1 = ref<any[]>([]) //保存临时的值
const defaultCheckedKeys = ref<any[]>([]) //功能选中节点
const selectIds = ref<any[]>([]) //树选中的节点
const copyGnshow = ref(false)
const selectedRows = ref<any[]>([]) //功能复选框选择的节点
const dialogheaderGn = ref('')
const flag = ref(true)
const qingKongFlag = ref(false)

// 查询部门及部门下人员
const bmList = ref<any[]>([])
const bmListDia = ref<any[]>([])
const filterBmList = ref<any[]>([])
yhqxService.getDwbm({ dwbm: userInfo.dwbm }).then((res) => {
  bmList.value = res.data.map((el: any) => ({ ...el, children: [] }))
  filterBmList.value = lodash.cloneDeep(bmList.value)
  bmList.value.forEach((bm: any, i: number) => {
    yhqxService
      .getDwbmRy({
        bmbm: bm.bmbm,
        dwbm: userInfo.dwbm,
      })
      .then((res) => {
        bm.children = res.data
        filterBmList.value[i].children = lodash.cloneDeep(res.data)
      })
  })
})

const gnTableRef = ref()
const onGnSelectChange = (rows: any[]) => {
  selectedRows.value = rows
  // 子级全选中后自动选中父级
  yhQxList.value.forEach((parent) => {
    const childrenSelected = parent.children?.every((child: any) =>
      rows.some((item) => item.qxfpbh === child.qxfpbh),
    )
    if (childrenSelected) gnTableRef.value.toggleRowSelection(parent, true)
  })
}

// 查询角色集合
const jsList = ref<any[]>([])
const jsListDia = ref<any[]>([])
const jsFilterList = ref<any[]>([])
yhqxService.getDwJs({ dwbm: userInfo.dwbm }).then((res) => {
  jsList.value = TreeUtilDTO.getTreeData(res.data, 'bm', 'fbm')
  jsFilterList.value = lodash.cloneDeep(jsList.value)
})

// 查询条线集合
const showTx = ref(false)
const txTree = ref<any[]>([])
yhqxService.getMhtx({}).then((res) => {
  txTree.value = res.data
})

const addSj = () => {
  showTx.value = true
  isIndeterminate.value = false
  sjqxCheckNodes.value = []
  checked.value = false
  nextTick(() => {
    txTreeRef.value?.setCheckedKeys([])
    isIndeterminate.value = false
    checkAll.value = false
  })
}

const editSj = () => {
  showTx.value = true
  sjqxCheckNodes.value = sjKeys.value.map((el: any) => ({ xtbm: el.sjbh, xtmc: el.sjmc }))
  if (sjKeys.value[0]?.sfglxjy === 'Y') {
    checked.value = true
  } else {
    checked.value = false
  }
  nextTick(() => {
    txTreeRef.value?.setCheckedKeys(sjKeys.value.map((sj) => sj.sjbh))
    if (sjKeys.value.length === txTree.value.length) {
      isIndeterminate.value = false
      checkAll.value = true
    } else if (sjKeys.value.length === 0) {
      isIndeterminate.value = false
      checkAll.value = false
    } else if (sjKeys.value.length < txTree.value.length) {
      isIndeterminate.value = true
    }
  })
}
// 条线全选操作
const checkAll = ref(false)
const isIndeterminate = ref(true)

const handleCheckAllChange = (val: boolean) => {
  if (val) {
    txTreeRef.value?.setCheckedKeys(txTree.value.map((el) => el.xtbm))
  } else {
    txTreeRef.value?.setCheckedKeys([])
  }
  isIndeterminate.value = false
}
const close = () => {
  data.value = []
  selectIds.value = []
}
// 移除授权
const ycsq = (row: any) => {
  ElMessageBox.confirm('此操作将会移除该功能，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    let params = {
      qxfpbhs: [row.qxfpbh],
      yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
      yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
      yyzlx: pzfs.value === 'user' ? '1' : '2',
    }
    if (row.cj === 2) {
      const fqx = yhQxList.value.find((qx) => qx.qxzybh === row.fbh)
      const broqx = fqx?.children.filter((qx: any) => qx.qxzybh !== row.qxzybh)
      if (broqx.length === 0) {
        params.qxfpbhs.push(fqx.qxfpbh)
      }
    }
    yhqxService.deleteGnfp(params).then(() => {
      ElMessage.success('移除成功')
      getQxTable()
    })
  })
}
// 打开按钮权限弹窗
const showAnqx = ref(false)
const anQxVal = ref<string[]>([])
const anQxList = ref<any[]>([])
// 编辑菜单以外的按钮权限，保存的时候要再发送回去
const otherAnQx = ref<string[]>([])
const editQx = (row: any) => {
  showAnqx.value = true
  otherAnQx.value = anqxList.value.filter((qx) => qx.fbh !== row.qxzybh).map((qx) => qx.qxzybh)
  anQxVal.value = anqxList.value.filter((qx) => qx.fbh === row.qxzybh).map((qx) => qx.qxzybh)
  const params = { cdqxbh: row.qxzybh }
  yhqxService.queryAnqxList(params).then((res) => {
    anQxList.value = res.data
    anQxList.value.forEach((qx) => {
      gnMap.set(qx.qxzybh, qx.qxzymc)
    })
  })
}

// 添加按钮权限
const addAnQdan = () => {
  const yhqx = TreeUtilDTO.flatten(yhQxList.value)
  const params = {
    list: [...yhqx.map((el) => el.qxzybh), ...otherAnQx.value, ...anQxVal.value].map((item) => ({
      gnlybm: '1',
      gnlymc: '自身功能',
      qxzybh: item,
      qxzymc: gnMap.get(item),
      yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
      yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
      yyzlx: pzfs.value === 'user' ? '1' : '2',
    })),
  }
  yhqxService.addGnfp(params).then(() => {
    ElMessage.success('添加成功')
    showAnqx.value = false
    otherAnQx.value = []
    anQxVal.value = []
    // 刷新列表
    getQxTable()
  })
}

// 点击人员
const ryItemClick = (item2: any) => {
  if (arr1.value.length) {
    return false
  }
  item2.check = !item2.check
  if (item2.check) {
    if (sqdxLists.value[0]) {
      sqdxLists.value[0].check = false
    }
    sqdxLists.value = [item2]
    arr2.value = [item2.ryid]
  } else {
    sqdxLists.value = []
    arr2.value = []
  }
  if (sqdxLists.value.length > 0) {
    yhqxService.getRyjsxx({ dwbm: userInfo.dwbm, ryid: sqdxLists.value[0]?.ryid }).then((res) => {
      ryJsxx.value = res.data
      getQxTable()
    })
  } else {
    yhQxList.value = []
    sjqxCheckNodes.value = []
    txTreeRef.value?.setCheckedKeys([])
  }
}

// 勾选角色
const jsItemCheck = (item: any, val: string[]) => {
  if (val.length === 0) {
    checkJsData.value = []
    sqdxLists.value = []
    yhQxList.value = []
    sjqxCheckNodes.value = []
    txTreeRef.value?.setCheckedKeys([])
  } else {
    checkJsData.value = [item.jsbm]
    sqdxLists.value = [item]
    getQxTable()
  }
}
// 弹框勾选角色
const jsDiaCheck = (item: any, val: string[]) => {
  if (val.length === 0) {
    checkJsData1.value = []
    sqdxListsDia.value = []
  } else {
    checkJsData1.value = val
    sqdxListsDia.value = jsFilterList.value.filter((el) => checkJsData1.value.includes(el.jsbm))
  }
}

// 弹框点击人员
const ryDiaClick = (item2: any) => {
  if (arr1Dia.value.length) {
    return false
  }
  item2.check = !item2.check
  if (item2.check) {
    sqdxListsDia.value.push(item2)
    arr2Dia.value.push(item2.ryid)
  } else {
    let index = null
    for (let inx = 0; inx < sqdxListsDia.value.length; inx++) {
      if (sqdxListsDia.value[inx].ryid === item2.ryid) {
        index = inx
      }
    }
    const i = arr2Dia.value.indexOf(item2.ryid)
    if (index !== null && index >= 0) {
      sqdxListsDia.value.splice(index, 1)
    }
    if (i >= 0) {
      arr2Dia.value.splice(i, 1)
    }
  }
}
//单位搜索
const onDwSearch = () => {
  const val = searchRyVal
  activeKey.value = []
  // 保存一个临时的值 用于前端筛选
  const SearchData: any[] = JSON.parse(JSON.stringify(filterBmList.value))

  // 如果没有值
  if (!val.value) {
    // activeKey.value = [SearchData[0].bmbm]
    const arrID = sqdxLists.value.map((item) => item.ryid)
    const diGui = (m: any[], arrID: any) => {
      for (const item of m) {
        if (arrID.includes(item.ryid)) {
          item.check = true
          item.show = false
        } else if (item.children && item.children.length > 0) {
          diGui(item.children, arrID)
        }
      }
    }
    diGui(SearchData, arrID)
    bmList.value = SearchData
  } else {
    // 遍历这个数组
    SearchData.forEach((item: any) => {
      // 如果有值展开所有的折叠菜单
      activeKey.value.push(item.bmbm)
      getSearch(val.value, item, item)
    })
    bmList.value = SearchData.filter((bm) => bm.children.some((ry: any) => !ry.show))
  }
  qingKongFlag.value = false
}
const getSearch = (val: string, item: any, itemA: any, param = true) => {
  if (param) {
    itemA.show = true
  }
  if (item.children && item.children.length > 0) {
    for (let i = 0; i < item.children.length; i++) {
      const storeA = item.children[i]
      // 如果匹配到数据
      if (pinyin.match(storeA.xm, val)) {
        // 如果选择的人 角色也应当显示
        itemA.show = false
        item.show = false
        storeA.show = false
        sqdxLists.value.forEach((item) => {
          if (storeA.ryid === item.ryid) {
            storeA.check = true
          }
        })
      } else {
        storeA.show = true
      }
      getSearch(val, storeA, itemA, false)
    }
  }
}
// 角色搜索
const onJsSearch = () => {
  const val = searchJsVal
  activeKey.value = []
  // 保存一个临时的值 用于前端筛选
  const SearchData: any[] = JSON.parse(JSON.stringify(jsFilterList.value))

  // 如果没有值
  if (!val.value) {
    // activeKey.value = [SearchData[0].jsbm]
    const arrID = sqdxLists.value.map((item) => item.bm)
    const diGui = (m: any[], arrID: any) => {
      for (const item of m) {
        if (arrID.includes(item.bm)) {
          item.check = true
          item.show = false
        } else if (item.children && item.children.length > 0) {
          diGui(item.children, arrID)
        }
      }
    }
    diGui(SearchData, arrID)
    jsList.value = SearchData
  } else {
    // 遍历这个数组
    SearchData.forEach((item: any) => {
      // 如果有值展开所有的折叠菜单
      activeKey.value.push(item.jsbm)
      getSearch2(val.value, item, item)
    })
    jsList.value = SearchData.filter((js) => js.children.some((ry: any) => !ry.show))
  }
  qingKongFlag.value = false
}
const getSearch2 = (val: string, item: any, itemA: any, param = true) => {
  if (param) {
    itemA.show = true
  }
  if (item.children && item.children.length > 0) {
    for (let i = 0; i < item.children.length; i++) {
      const storeA = item.children[i]
      // 如果匹配到数据
      if (pinyin.match(storeA.mc, val)) {
        // 如果选择的人 角色也应当显示
        itemA.show = false
        item.show = false
        storeA.show = false
        sqdxLists.value.forEach((item) => {
          if (storeA.bm === item.bm) {
            storeA.check = true
          }
        })
      } else {
        storeA.show = true
      }
      getSearch2(val, storeA, itemA, false)
    }
  }
}

const tabChange = (activeName: string) => {
  if (activeName === 'user') {
    onDwSearch()
    checkJsData.value = []
  } else {
    onJsSearch()
    if (sqdxLists.value.length) {
      sqdxLists.value[0].check = false
    }
  }
  sqdxLists.value = []
  yhQxList.value = []
  sjKeys.value = []
  activeTabKey.value = '1'
}

const tabChange1 = (activeName: string) => {
  if (activeName === 'user') {
    onDwSearch1()
    checkJsData1.value = []
  } else {
    onJsSearch1()
    if (sqdxListsDia.value.length) {
      sqdxListsDia.value[0].check = false
    }
  }
  sqdxListsDia.value = []
}

//复制功能权限单位搜索
const searchRyVal1 = ref('')
const searchJsVal1 = ref('')
const onDwSearch1 = () => {
  const val = searchRyVal1
  activeKey1.value = []
  // 保存一个临时的值 用于前端筛选
  const SearchData: any[] = JSON.parse(JSON.stringify(filterBmList.value))

  // 如果没有值
  if (!val.value) {
    // activeKey1.value = [SearchData[0].bmbm]
    const arrID = sqdxListsDia.value.map((item) => item.ryid)
    const diGui = (m: any[], arrID: any) => {
      for (const item of m) {
        if (arrID.includes(item.ryid)) {
          item.check = true
          item.show = false
        } else if (item.children && item.children.length > 0) {
          diGui(item.children, arrID)
        }
      }
    }
    diGui(SearchData, arrID)
    bmListDia.value = SearchData
  } else {
    // 遍历这个数组
    SearchData.forEach((item: any) => {
      // 如果有值展开所有的折叠菜单
      activeKey1.value.push(item.bmbm)
      getSearch1(val.value, item, item)
    })
    bmListDia.value = SearchData.filter((bm) => bm.children.some((ry: any) => !ry.show))
  }
  qingKongFlag.value = false
}
const getSearch1 = (val: string, item: any, itemA: any, param = true) => {
  if (param) {
    itemA.show = true
  }
  if (item.children && item.children.length > 0) {
    for (let i = 0; i < item.children.length; i++) {
      const storeA = item.children[i]
      // 如果匹配到数据
      if (pinyin.match(storeA.xm, val)) {
        // 如果选择的人 角色也应当显示
        itemA.show = false
        item.show = false
        storeA.show = false
        sqdxListsDia.value.forEach((item) => {
          if (storeA.ryid === item.ryid) {
            storeA.check = true
          }
        })
      } else {
        storeA.show = true
      }
      getSearch(val, storeA, itemA, false)
    }
  }
}
//复制功能权限角色搜索
const onJsSearch1 = () => {
  const val = searchJsVal1
  activeKey1.value = []
  // 保存一个临时的值 用于前端筛选
  const SearchData: any[] = JSON.parse(JSON.stringify(jsFilterList.value))

  // 如果没有值
  if (!val.value) {
    // activeKey1.value = [SearchData[0].jsbm]
    const arrID = sqdxListsDia.value.map((item) => item.bm)
    const diGui = (m: any[], arrID: any) => {
      for (const item of m) {
        if (arrID.includes(item.bm)) {
          item.check = true
          item.show = false
        } else if (item.children && item.children.length > 0) {
          diGui(item.children, arrID)
        }
      }
    }
    diGui(SearchData, arrID)
    jsListDia.value = SearchData
  } else {
    // 遍历这个数组
    SearchData.forEach((item: any) => {
      // 如果有值展开所有的折叠菜单
      activeKey1.value.push(item.jsbm)
      getSearch3(val.value, item, item)
    })
    jsListDia.value = SearchData.filter((js) => js.children.some((ry: any) => !ry.show))
  }
  qingKongFlag.value = false
}
const getSearch3 = (val: string, item: any, itemA: any, param = true) => {
  if (param) {
    itemA.show = true
  }
  if (item.children && item.children.length > 0) {
    for (let i = 0; i < item.children.length; i++) {
      const storeA = item.children[i]
      // 如果匹配到数据
      if (pinyin.match(storeA.mc, val)) {
        // 如果选择的人 角色也应当显示
        itemA.show = false
        item.show = false
        storeA.show = false
        sqdxListsDia.value.forEach((item) => {
          if (storeA.bm === item.bm) {
            storeA.check = true
          }
        })
      } else {
        storeA.show = true
      }
      getSearch2(val, storeA, itemA, false)
    }
  }
}
const timer = ref()
const onSearchTable = () => {
  if (sqdxLists.value.length > 0) {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      getQxTable()
    }, 500)
  }
}
const gnFilter = ref('')
const onChange = (value: any) => {
  if (value) {
    const tree = JSON.parse(JSON.stringify(addGnTree.value))
    addGnTree.value = filter(tree, value)
  } else {
    addGnTree.value = addGnTree1.value
  }
}
// nodebuggers就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组
const filter = (nodes: any[], query: string) => {
  // 条件就是节点的title过滤关键字
  const predicate = (node: any) => pinyin.match(node.qxzymc, query)

  if (!(nodes && nodes.length)) {
    return []
  }
  const newChildren = []
  for (const node of nodes) {
    // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
    // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
    // 2. 自己本身符合条件
    const subs = filter(node.children, query)
    if (predicate(node)) {
      newChildren.push(node)
    } else if (subs && subs.length) {
      node.children = subs
      newChildren.push(node)
    }
  }
  return newChildren.length ? newChildren : []
}

// 清空
const qingKong = () => {
  qingKongFlag.value = true
  // 清除授权对象
  if (sqdxLists.value[0]) {
    sqdxLists.value[0].check = false
  }
  sqdxLists.value = []
  sjKeys.value = []
  checkJsData.value = []
  // 用户操作
  flag.value = false
  // 功能授权
  yhQxList.value = []
  // 角色状态
  arr1.value = []
  // 人员状态
  arr2.value = []
}

// 复选框选中功能节点变化
const halfCheckedKeys = ref<string[]>([])
const clickCheckGn = (node: any, e: any) => {
  // 渲染右边的lists
  data.value = []
  // 获取右边的数据
  fn1(e.checkedNodes)
  defaultCheckedKeys.value = e.checkedKeys
  halfCheckedKeys.value = e.halfCheckedKeys
}
// 移除授权
const moveSq = () => {
  if (activeTabKey.value === '1') {
    moveSqGnApi()
  } else if (activeTabKey.value === '2') {
    moveSqSjApi()
  }
}

// 功能授权移出授权Api
const moveSqGnApi = () => {
  if (selectedRows.value.length <= 0) {
    ElMessage.warning('请选择需要移除的功能授权')
    return
  }
  ElMessageBox.confirm('此操作将会移除该功能，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      qxfpbhs: selectedRows.value.map((row) => row.qxfpbh),
      yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
      yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
      yyzlx: pzfs.value === 'user' ? '1' : '2',
    }
    yhqxService.deleteGnfp(params).then(() => {
      ElMessage.success('移除成功')
      getQxTable()
    })
  })
}

// 数据授权移出授权Api
const moveSqSjApi = () => {
  ElMessageBox.confirm('此操作将会移除所有数据权限，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      qxsjfpbhs: sjKeys.value.map((sj) => sj.qxsjfpbh),
      yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
      yyzlx: pzfs.value === 'user' ? '1' : '2',
    }
    yhqxService.deleteSjfp(params).then(() => {
      ElMessage.success('删除成功')
      getQxTable()
    })
  })
}

// 复制功能权限
const copyGn = async () => {
  if (sqdxLists.value.length !== 1) {
    return false
  }
  if (activeTabKey.value === '1') {
    dialogheaderGn.value = '功能授权'
  } else {
    dialogheaderGn.value = '数据授权'
  }
  arr1Dia.value = []
  arr2Dia.value = []

  copyGnshow.value = true
  sqdxListsDia.value = []
  bmListDia.value = lodash.cloneDeep(filterBmList.value)
  jsListDia.value = lodash.cloneDeep(jsFilterList.value)
}
// 复制功能确定按钮
const copyGnQdan = () => {
  if (sqdxListsDia.value.length > 0) {
    if (activeTabKey.value === '1') {
      copyGnApi()
    } else if (activeTabKey.value === '2') {
      copySjqx()
    }
  } else {
    ElMessage.warning('请选择授权对象')
  }
}
// 复制功能权限
const copyGnApi = () => {
  const params = {
    list: sqdxListsDia.value.map((el) => ({
      yyzlx: pzfs1.value === 'user' ? '1' : '2',
      yyzbh: pzfs1.value === 'user' ? el.ryid : el.jsbm,
      yyzmc: pzfs1.value === 'user' ? el.xm : el.jsmc,
    })),
    yyzlx: pzfs.value === 'user' ? '1' : '2',
    yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
    yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
  }
  yhqxService.copyGongnApi(params).then(() => {
    ElMessage.success('复制成功')
    copyGnshow.value = false
  })
}
// 复制数据权限
const copySjqx = () => {
  const params = {
    list: sqdxListsDia.value.map((el) => ({
      yyzlx: pzfs1.value === 'user' ? '1' : '2',
      yyzbh: pzfs1.value === 'user' ? el.ryid : el.jsbm,
      yyzmc: pzfs1.value === 'user' ? el.xm : el.jsmc,
    })),
    yyzlx: pzfs.value === 'user' ? '1' : '2',
    yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
    yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
  }
  yhqxService.copyShujApi(params).then(() => {
    ElMessage.success('复制成功')
    copyGnshow.value = false
  })
}

// 添加功能
const addGn = () => {
  if (sqdxLists.value.length <= 0) {
    return false
  }
  data.value = []
  selectIds.value = []
  showAdd.value = true
  getAddTreeList()
}
// 添加功能确定按钮
const addGnTreeRef = ref()
const addGnQdan = () => {
  if (defaultCheckedKeys.value.length === 0) {
    ElMessage.warning('请选择添加的功能')
    return
  }
  defaultCheckedKeys.value = addGnTreeRef.value?.getCheckedKeys()
  halfCheckedKeys.value = addGnTreeRef.value?.getHalfCheckedKeys()
  const params = {
    list: [...defaultCheckedKeys.value, ...halfCheckedKeys.value].map((item) => ({
      gnlybm: '1',
      gnlymc: '自身功能',
      qxzybh: item,
      qxzymc: gnMap.get(item),
      yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
      yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
      yyzlx: pzfs.value === 'user' ? '1' : '2',
    })),
  }
  yhqxService.addGnfp(params).then(() => {
    ElMessage.success('添加成功')
    showAdd.value = false
    // 刷新列表
    getQxTable()
    selectIds.value = []
  })
}

const filterTreeData = (arr: any[]) => {
  return lodash.cloneDeep(arr).filter((item) => {
    if (item.children?.length) {
      item.children = filterTreeData(item.children)
    }
    return item.gnlybm === '1'
  })
}
// 获取添加功能的树
const gnMap = new Map()
const getAddTreeList = async () => {
  const res = await yhqxService.queryByDw()
  addGnTree.value = JSON.parse(JSON.stringify(res.data))
  TreeUtilDTO.flatten(addGnTree.value).forEach((gn) => {
    gnMap.set(gn.qxzybh, gn.qxzymc)
  })
  addGnTree1.value = JSON.parse(JSON.stringify(res.data))
  // 筛选选中的节点
  const selfQxList = filterTreeData(yhQxList.value)
  fn(selfQxList)
  defaultCheckedKeys.value = selectIds.value.map((item) => item.qxzybh)
  data.value = selectIds.value.map((item) => {
    return { gnfl: item.zyfl, gnmc: item.qxzymc }
  })
}
// 获取授权数据(包含功能和数据)
const getGnQxTable = () => {
  const params = {
    qxzymc: gnFilter.value,
    yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
    ryjsbmList: pzfs.value === 'user' ? ryJsxx.value.map((js) => js.jsbm) : [],
  }
  yhqxService.queryGnTable(params).then((res) => {
    yhQxList.value = res.data.filter((qx: any) => qx.qxzylx === '1')
    anqxList.value = res.data.filter((qx: any) => qx.qxzylx === '2')
  })
}

// 能否添加数据权限，有自身权限的不能添加
const addableSjqx = computed(() => sjKeys.value.some((qx) => qx.qxlxbm === '1'))
// 数据权限列表
const sjQxList = computed(() => TreeUtilDTO.getTreeData(sjKeys.value, 'bm', 'fbm'))
const getSjQxList = () => {
  const params = {
    yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
    ryjsbmList: pzfs.value === 'user' ? ryJsxx.value.map((js) => js.jsbm) : [],
  }
  yhqxService.querySjList(params).then((res) => {
    sjKeys.value = res.data
  })
}
const getQxTable = () => {
  if (sqdxLists.value.length === 0) return
  if (activeTabKey.value === '1') {
    getGnQxTable()
  } else if (activeTabKey.value === '2') {
    getSjQxList()
  }
}

// 添加数据权限
const sjqxCheckNodes = ref<any[]>([])
const checkSjqx = (data: any, keys: any) => {
  sjqxCheckNodes.value = keys.checkedNodes
  if (keys.checkedNodes.length === txTree.value.length) {
    isIndeterminate.value = false
    checkAll.value = true
  } else if (keys.checkedNodes.length === 0) {
    isIndeterminate.value = false
    checkAll.value = false
  } else if (keys.checkedNodes.length < txTree.value.length) {
    isIndeterminate.value = true
  }
}
const addSjqx = () => {
  sjqxCheckNodes.value = txTreeRef.value?.getCheckedNodes()
  if (sjqxCheckNodes.value.length === 0) {
    ElMessage.warning('请选择条线')
    return
  }
  const params = {
    list: sjqxCheckNodes.value.map((item) => ({
      sjbh: item.xtbm,
      sjmc: item.xtmc,
    })),
    sfglxjy: checked.value ? 'Y' : 'N',
    yyzbh: pzfs.value === 'user' ? sqdxLists.value[0]?.ryid : sqdxLists.value[0]?.jsbm,
    yyzmc: pzfs.value === 'user' ? sqdxLists.value[0]?.xm : sqdxLists.value[0]?.jsmc,
    yyzdwbm: sqdxLists.value[0]?.dwbm,
    yyzlx: pzfs.value === 'user' ? '1' : '2',
  }
  yhqxService.addSjQx(params).then(() => {
    ElMessage.success('保存成功')
    showTx.value = false
    // 刷新列表
    getQxTable()
  })
}

// 递归筛选选中的权限
const fn = (data: any[]) => {
  for (const item of data) {
    if (item.cj !== 1 || item.qxzybh === '001') selectIds.value.push(item)
    if (item.children?.length > 0) {
      fn(item.children)
    }
  }
}

// 获取展示的数据 递归到最后一层
const fn1 = (list: any[]) => {
  for (const item of list) {
    if (item.cj !== 1 || item.qxzybh === '001')
      data.value.push({ gnfl: item.zyfl, gnmc: item.qxzymc })
  }
}

// 查看人员角色信息
const showRyJs = ref(false)
const ryJsxx = ref<any[]>([])
const viewRyJs = () => {
  showRyJs.value = true
}

// 搜索过滤条线树
const txFilter = ref('')
const txTreeRef = ref()
const filterTree = () => {
  txTreeRef.value?.filter(txFilter.value)
}
const filterTx = (val: string, data: any) => {
  if (!val) return true
  return data.xtmc.includes(val)
}

const checked = ref(false)
</script>

<template>
  <div class="container">
    <el-tabs type="card" model-value="yhqxpz">
      <el-tab-pane label="用户权限配置" name="yhqxpz">
        <div class="menu-permission">
          <div class="yhqx-left">
            <div class="card-container">
              <el-tabs v-model="pzfs" @tab-change="tabChange">
                <el-tab-pane name="user" label="按人员">
                  <div style="margin-bottom: 10px">
                    <el-input
                      suffix-icon="Search"
                      v-model="searchRyVal"
                      @input="onDwSearch"
                      clearable
                    />
                  </div>
                  <el-scrollbar style="height: calc(100% - 75px)">
                    <el-collapse class="ry-collapse" v-model="activeKey" v-if="bmList.length > 0">
                      <el-collapse-item
                        v-for="item in bmList"
                        :key="item.bmbm"
                        :name="item.bmbm"
                        :title="item.bmmc"
                      >
                        <div class="box">
                          <template v-for="item1 in item.children" :key="item1.ryid">
                            <div
                              class="btn-item"
                              :class="{
                                btn_active: item1.check,
                                'btn-item1': arr1.length > 0,
                              }"
                              v-if="!item1.show"
                              style="margin: 0 10px 10px 0"
                              @click="ryItemClick(item1)"
                            >
                              <span>{{ item1.xm }}</span>
                            </div>
                          </template>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                    <el-empty v-else />
                  </el-scrollbar>
                  <div style="text-align: right; margin: 10px 0">
                    <el-button :disabled="!sqdxLists.length" class="yhqx-btn" @click="viewRyJs">
                      <i class="btn-icon role"></i>
                      查看人员角色
                    </el-button>
                  </div>
                </el-tab-pane>
                <el-tab-pane name="role" label="按角色">
                  <div style="margin-bottom: 10px">
                    <el-input
                      suffix-icon="Search"
                      v-model="searchJsVal"
                      @input="onJsSearch"
                      clearable
                    />
                  </div>
                  <el-scrollbar style="height: calc(100% - 75px)">
                    <el-collapse class="js-collapse" v-model="activeKey" v-if="jsList.length > 0">
                      <el-collapse-item v-for="item in jsList" :key="item.jsbm" :name="item.jsbm">
                        <template #title>
                          <el-checkbox-group
                            v-model="checkJsData"
                            @click="(e: Event) => e.stopPropagation()"
                            @change="(val: string[]) => jsItemCheck(item, val)"
                          >
                            <el-checkbox :value="item.jsbm">{{ item.jsmc }}</el-checkbox>
                          </el-checkbox-group>
                        </template>
                        <div class="box">
                          <template v-for="item1 in item.children" :key="item1.bm">
                            <div
                              class="btn-item"
                              :class="{
                                btn_active: item1.check,
                                'btn-item1': true,
                              }"
                              v-if="!item1.show"
                              style="margin: 0 10px 10px 0"
                            >
                              <span>{{ item1.mc }}</span>
                            </div>
                          </template>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                    <el-empty v-else />
                  </el-scrollbar>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
          <div class="right">
            <div class="top" style="position: relative">
              <div class="card-container">
                <el-tabs model-value="1">
                  <el-tab-pane name="1" label="授权对象">
                    <el-scrollbar max-height="80px">
                      <div
                        class="btn-item"
                        style="margin: 0 10px 10px 0"
                        v-for="(item, index) in sqdxLists"
                        :key="index"
                      >
                        {{ item.xm || item.jsmc }}
                      </div>
                    </el-scrollbar>
                    <el-button
                      style="position: absolute; right: 8px; bottom: 0"
                      class="yhqx-btn"
                      @click="qingKong"
                    >
                      <i class="btn-icon qingkong"></i>
                      清空
                    </el-button>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="bottom">
              <div class="card-container">
                <el-tabs v-model="activeTabKey" @tab-change="getQxTable">
                  <el-tab-pane name="1" label="功能授权">
                    <div style="height: 45px">
                      <div style="float: left">
                        <el-input
                          v-model="gnFilter"
                          suffix-icon="Search"
                          style="width: 260px"
                          @input="onSearchTable"
                          placeholder="功能名称"
                          clearable
                        />
                      </div>
                      <div class="btn-group" style="float: right">
                        <el-button
                          :disabled="sqdxLists.length === 0"
                          class="yhqx-btn"
                          @click="addGn"
                        >
                          <i class="btn-icon add"></i>
                          添加功能
                        </el-button>
                        <el-button
                          :disabled="
                            sqdxLists.length === 0 || selectedRows.some((el) => el.gnlybm !== '1')
                          "
                          class="yhqx-btn"
                          @click="moveSq"
                        >
                          <i class="btn-icon jc"></i>
                          移除授权
                        </el-button>
                        <el-button
                          :disabled="sqdxLists.length !== 1"
                          class="yhqx-btn"
                          @click="copyGn"
                        >
                          <i class="btn-icon copy"></i>
                          复制功能权限
                        </el-button>
                      </div>
                    </div>

                    <!-- 功能table树形列表 -->
                    <div style="height: calc(100% - 45px)">
                      <el-table
                        ref="gnTableRef"
                        height="100%"
                        :data="yhQxList"
                        row-key="qxfpbh"
                        stripe
                        @selection-change="onGnSelectChange"
                      >
                        <el-table-column type="selection" width="55" />
                        <el-table-column
                          v-for="column in gNcolumns"
                          show-overflow-tooltip
                          :key="column.dataIndex"
                          :prop="column.dataIndex"
                          :label="column.title"
                        />
                        <el-table-column label="操作" width="180" fixed="right">
                          <template #default="scope">
                            <el-button
                              link
                              type="primary"
                              v-if="!scope.row.children && scope.row.gnlybm === '1'"
                              @click="ycsq(scope.row)"
                              >移除授权</el-button
                            >
                            <el-button
                              link
                              type="primary"
                              v-if="scope.row.qxbjqmc && scope.row.gnlybm === '1'"
                              @click="editQx(scope.row)"
                              >编辑权限</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane name="2" label="数据查询授权">
                    <div class="qx-header">
                      <div class="tips">说明：查询自己办理的案件不需要授予任何权限</div>
                      <div class="btn-group">
                        <el-button
                          :disabled="sqdxLists.length === 0 || addableSjqx"
                          class="yhqx-btn"
                          @click="addSj"
                        >
                          <i class="btn-icon add"></i>
                          添加数据权限
                        </el-button>
                        <el-button
                          :disabled="
                            sqdxLists.length === 0 ||
                            sjKeys.length === 0 ||
                            sjKeys.some((sj) => sj.qxlxbm !== '1')
                          "
                          class="yhqx-btn"
                          @click="editSj"
                        >
                          <i class="btn-icon save"></i>
                          修改
                        </el-button>
                        <el-button
                          :disabled="
                            sqdxLists.length === 0 ||
                            sjKeys.length === 0 ||
                            sjKeys.some((sj) => sj.qxlxbm !== '1')
                          "
                          class="yhqx-btn"
                          @click="moveSq"
                        >
                          <i class="btn-icon delete"></i>
                          删除
                        </el-button>
                        <el-button
                          :disabled="
                            sqdxLists.length !== 1 || sjKeys.some((sj) => sj.qxlxbm !== '1')
                          "
                          class="yhqx-btn"
                          @click="copyGn"
                        >
                          <i class="btn-icon copy"></i>
                          复制数据权限
                        </el-button>
                      </div>
                    </div>

                    <!-- 功能table树形列表 -->
                    <div style="height: calc(100% - 45px)">
                      <el-table height="100%" :data="sjQxList" row-key="bm" stripe>
                        <el-table-column
                          v-for="column in sJcolumns"
                          show-overflow-tooltip
                          :key="column.dataIndex"
                          :prop="column.dataIndex"
                          :label="column.title"
                        />
                      </el-table>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>

          <!-- 添加功能 -->
          <el-dialog
            v-model="showAdd"
            width="1150px"
            title="添加功能"
            class="yhqx-dialog"
            @close="close"
            align-center
            :close-on-click-modal="false"
          >
            <div class="dialog">
              <div class="dialogheader">
                对象:
                {{ sqdxLists && sqdxLists.map((item) => item.xm).toString() }}
              </div>
              <div class="dialogcontent">
                <div class="left">
                  <el-input
                    v-model="gnFilter"
                    suffix-icon="Search"
                    style="margin-bottom: 8px"
                    placeholder="输入关键字查询"
                    @input="onChange"
                    clearable
                  />
                  <el-scrollbar height="400px">
                    <el-tree
                      v-if="addGnTree.length > 0"
                      ref="addGnTreeRef"
                      show-checkbox
                      @check="clickCheckGn"
                      :default-checked-keys="defaultCheckedKeys"
                      :data="addGnTree"
                      :props="replaceFields"
                      node-key="qxzybh"
                    />
                  </el-scrollbar>
                </div>
                <div class="right">
                  <div class="tab-box">
                    <el-tabs model-value="1">
                      <el-tab-pane name="1" label="已选择功能">
                        <el-table :data="data" height="400px">
                          <el-table-column
                            v-for="column in columns"
                            :key="column.dataIndex"
                            :prop="column.dataIndex"
                            :label="column.title"
                          />
                        </el-table>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="addGnQdan">确定</el-button>
              </span>
            </template>
          </el-dialog>

          <!-- 添加数据权限 -->
          <el-dialog
            v-model="showTx"
            width="800px"
            title="添加数据权限"
            class="sjqx-dialog"
            align-center
            :close-on-click-modal="false"
          >
            <div class="dialog">
              <div class="dialogheader">
                对象:
                {{ sqdxLists && sqdxLists.map((item) => item.xm || item.jsmc).toString() }}
              </div>
              <div class="dia-content">
                <div style="height: 45px; margin-top: 8px">
                  <div style="display: flex; align-items: center">
                    <el-input
                      v-model="txFilter"
                      suffix-icon="Search"
                      style="width: 260px"
                      @input="filterTree"
                      placeholder="条线名称"
                      clearable
                    />
                    <div style="margin-left: 12px">
                      <el-checkbox v-model="checked">授权条线中的下级院部门</el-checkbox>
                    </div>
                  </div>
                </div>
                <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                >
                  全选
                </el-checkbox>
                <el-scrollbar height="400px">
                  <el-tree
                    ref="txTreeRef"
                    show-checkbox
                    default-expand-all
                    :data="txTree"
                    node-key="xtbm"
                    :filter-node-method="filterTx"
                    @check="checkSjqx"
                  >
                    <template #default="{ data }">
                      <div class="custom-tree-node">
                        <img src="@/assets/images/tx.png" alt="" />
                        <span>&nbsp;{{ data.xtmc }}</span>
                      </div>
                    </template>
                  </el-tree>
                </el-scrollbar>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="addSjqx">确定</el-button>
              </span>
            </template>
          </el-dialog>

          <!--复制功能权限  -->
          <el-dialog
            v-model="copyGnshow"
            width="1150px"
            :title="`复制${activeTabKey === '1' ? '功能' : '数据'}权限`"
            class="yhqx-dialog2"
            align-center
            :close-on-click-modal="false"
          >
            <div class="dialog card-container">
              <div class="dialogheader">{{ dialogheaderGn }}</div>
              <div class="dialogcontent">
                <div class="left">
                  <el-tabs v-model="pzfs1" @tab-change="tabChange1">
                    <el-tab-pane name="user" label="按人员">
                      <div style="margin-bottom: 10px">
                        <el-input
                          suffix-icon="Search"
                          v-model="searchRyVal1"
                          @input="onDwSearch1"
                          clearable
                        />
                      </div>
                      <el-scrollbar style="height: calc(100% - 75px)">
                        <el-collapse
                          class="ry-collapse"
                          v-model="activeKey1"
                          v-if="bmListDia.length > 0"
                        >
                          <el-collapse-item
                            v-for="item in bmListDia"
                            :key="item.bmbm"
                            :name="item.bmbm"
                            :title="item.bmmc"
                          >
                            <div class="box">
                              <template v-for="item1 in item.children" :key="item1.ryid">
                                <div
                                  class="btn-item"
                                  :class="{
                                    btn_active: item1.check,
                                    'btn-item1': arr1.length > 0,
                                  }"
                                  v-if="!item1.show"
                                  style="margin: 0 10px 10px 0"
                                  @click="ryDiaClick(item1)"
                                >
                                  <span>{{ item1.xm }}</span>
                                </div>
                              </template>
                            </div>
                          </el-collapse-item>
                        </el-collapse>
                        <el-empty v-else />
                      </el-scrollbar>
                    </el-tab-pane>
                    <el-tab-pane name="role" label="按角色">
                      <div style="margin-bottom: 10px">
                        <el-input
                          suffix-icon="Search"
                          v-model="searchJsVal1"
                          @input="onJsSearch1"
                          clearable
                        />
                      </div>
                      <el-scrollbar style="height: calc(100% - 40px)">
                        <el-collapse
                          class="js-collapse"
                          v-model="activeKey1"
                          v-if="jsListDia.length > 0"
                        >
                          <el-collapse-item
                            v-for="item in jsListDia"
                            :key="item.jsbm"
                            :name="item.jsbm"
                          >
                            <template #title>
                              <el-checkbox-group
                                v-model="checkJsData1"
                                @click="(e: Event) => e.stopPropagation()"
                                @change="(val: string[]) => jsDiaCheck(item, val)"
                              >
                                <el-checkbox :value="item.jsbm">{{ item.jsmc }}</el-checkbox>
                              </el-checkbox-group>
                            </template>
                            <div class="box">
                              <template v-for="item1 in item.children" :key="item1.bm">
                                <div
                                  class="btn-item"
                                  :class="{
                                    btn_active: item1.check,
                                    'btn-item1': true,
                                  }"
                                  v-if="!item1.show"
                                  style="margin: 0 10px 10px 0"
                                >
                                  <span>{{ item1.mc }}</span>
                                </div>
                              </template>
                            </div>
                          </el-collapse-item>
                        </el-collapse>
                        <el-empty v-else />
                      </el-scrollbar>
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div class="right">
                  <div class="tab-box">
                    <el-tabs model-value="1">
                      <el-tab-pane name="1" label="已选择对象">
                        <div class="jcbg" style="margin-bottom: 40px">
                          <div
                            class="btn-item"
                            style="margin: 0 10px 10px 0"
                            v-for="(item, index) in sqdxListsDia"
                            :key="index"
                          >
                            {{ item.xm || item.jsmc }}
                          </div>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="copyGnQdan">确定</el-button>
              </span>
            </template>
          </el-dialog>

          <!--人员角色信息  -->
          <el-dialog
            v-model="showRyJs"
            width="500px"
            title="人员角色"
            align-center
            :close-on-click-modal="false"
          >
            <div v-if="ryJsxx.length > 0" style="height: 300px; overflow-y: auto">
              <div
                class="btn-item"
                style="margin: 0 10px 10px 0"
                v-for="item in ryJsxx"
                :key="item.jsbm"
              >
                {{ item.jsmc }}
              </div>
            </div>
            <el-empty v-else description="该人员暂未分配角色" />
          </el-dialog>
          <!--页面按钮权限  -->
          <el-dialog
            v-model="showAnqx"
            width="600px"
            title="编辑权限"
            align-center
            :close-on-click-modal="false"
          >
            <div v-if="anQxList.length > 0" style="height: 300px; overflow-y: auto">
              <el-checkbox-group v-model="anQxVal">
                <el-checkbox
                  v-for="qx in anQxList"
                  :label="qx.qxzymc"
                  :value="qx.qxzybh"
                  :key="qx.qxzybh"
                />
              </el-checkbox-group>
            </div>
            <el-empty v-else description="暂无可分配权限" />
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="addAnQdan">确定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.menu-permission {
  width: 100%;
  height: 100%;
  display: flex;
  .yhqx-left {
    width: 448px;
    height: 100%;
    margin-right: 12px;
    background-color: #fff;
    border: 1px solid #dae4f1;
  }
  .right {
    height: 100%;
    width: calc(100% - 460px);
    .top {
      height: 150px;
      background-color: #fff;
      border: 1px solid #dae4f1;
    }
    .bottom {
      margin-top: 10px;
      height: calc(100% - 160px);
      background-color: #fff;
      border: 1px solid #dae4f1;
    }
  }

  .single-btn {
    cursor: pointer;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    display: flex;
    align-items: center;
    color: #666;
  }
}
.tab-box {
  :deep(.el-tabs__nav) {
    padding: 0 16px;
  }
}
.card-container {
  height: 100%;
  .el-tabs {
    border: none;
  }
  .qx-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .tips {
      color: #ff5050;
      padding-left: 10px;
      &::before {
        content: '';
        height: 19px;
        border-left: 4px solid #0090ff;
        position: relative;
        left: -10px;
        top: 0;
      }
    }
  }
  :deep(.el-tabs__header) {
    height: 35px;
    .el-tabs__nav-wrap {
      height: 100%;
      .el-tabs__nav-scroll {
        height: 100%;
      }
    }
    .el-tabs__nav {
      height: 100%;
      padding: 0 16px;
      .el-tabs__item {
        font-size: 14px;
        height: 100%;
        &:hover,
        &.is-active {
          background-color: transparent;
          color: #0098e7 !important;
          font-weight: 700;
        }
      }
      .el-tabs__active-bar {
        background-color: #0098e7;
      }
    }
  }

  :deep(.el-collapse-item__header) {
    color: #2d405e;
    font-weight: bold;
    height: 40px;
    border-bottom: 1px solid #dae4f1;
  }
  .ry-collapse {
    :deep(.el-collapse-item__header) {
      padding-left: 12px;
      &::before {
        content: '';
        height: 19px;
        border-left: 4px solid #0090ff;
        position: relative;
        left: -10px;
        top: 0;
      }
    }
  }
  .js-collapse {
    :deep(.el-collapse-item__header) {
      .el-checkbox__label {
        color: #2d405e;
        font-weight: bold;
      }
    }
  }
  :deep(.el-collapse-item__content) {
    padding: 16px 0;
  }
}
.collapse-item {
  font-size: 16px;
  .panel-title {
    height: unset;
    div {
      display: inline-block;
      box-sizing: border-box;
      padding: 0px 18px;
      text-align: center;
      line-height: 28px;
      margin-bottom: 10px;
      height: 28px !important;
      font-size: 14px;
      border-radius: 3px;
      min-width: 78px;
      background-color: rgba(0, 144, 255, 0.2);
      color: #195482;
      border: 1px solid #dae4f1;
    }
  }
  //禁用
  .panel-title2 {
    div {
      display: inline-block;
      box-sizing: border-box;
      padding: 0px 18px;
      margin-bottom: 10px;
      font-size: 14px;
      text-align: center;
      height: 28px !important;
      line-height: 28px;
      color: #b5b5b5;
      background: #f5f5f5;
      border-radius: 3px;
      cursor: not-allowed !important;
      min-width: 78px;
    }
  }
  // 选中状态
  .panel-title1 {
    div {
      position: relative;
      display: inline-block;
      padding: 0px 18px;
      text-align: center;
      border: 1px solid #05b75d;
      box-sizing: border-box;
      background-color: #fff;
      height: 28px;
      line-height: 28px;
      color: #666;
      font-size: 14px;
      border-radius: 3px;
      text-align: center;
      min-width: 78px;
    }
    div:after {
      content: '';
      height: 0;
      border: solid transparent;
      position: absolute;
      border-width: 9px;
      border-top-color: #05b75d;
      border-right-color: #05b75d;
      top: 0px;
      right: 0px;
    }
    div::before {
      content: '';
      width: 6px;
      height: 9px;
      position: absolute;
      right: 2px;
      bottom: 20px;
      z-index: 1;
      border: 2px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      transform: rotate(45deg);
    }
  }
}

.yhqx-dialog,
.sjqx-dialog {
  .dialogheader {
    height: 35px;
    background-color: #cbe2ff;
    font-size: 16px;
    font-weight: 700;
    line-height: 35px;
    padding-left: 10px;
    color: #0090ff;
  }
  .dia-content {
    padding: 10px;
  }
  .dialogcontent {
    padding: 10px;
    display: flex;
    .left {
      padding: 10px;
      box-sizing: border-box;
      width: 325px;
      border: 1px solid #dae4f1;
      margin-right: 10px;
    }
    .right {
      width: calc(100% - 335px);
    }
  }
  .dialog {
    border: 1px solid #dae4f1;
  }
}
.yhqx-dialog2 {
  .dialogheader {
    height: 35px;
    background-color: #cbe2ff;
    font-size: 16px;
    font-weight: 700;
    line-height: 35px;
    padding-left: 10px;
    color: #0090ff;
  }
  .dialogcontent {
    padding: 10px;
    display: flex;
    height: calc(100% - 35px);
    .left {
      box-sizing: border-box;
      width: calc(50% - 108px);
      border: 1px solid #dae4f1;
      margin-right: 10px;
    }
    .right {
      width: calc(50% + 98px);
      border: 1px solid #dae4f1;
    }
  }
  .dialog {
    border: 1px solid #dae4f1;
    height: 70vh;
  }
}
.btn-item {
  cursor: pointer;
  padding: 0px 8px;
  line-height: 28px;
  height: 28px;
  font-size: 14px;
  display: inline-block;
  color: #666;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  background: #f5f5f5;
  border-radius: 3px;
  min-width: 78px;
  text-align: center;
}

// 禁用
.btn-item1 {
  cursor: pointer;
  border: 1px solid #dcdcdc;
  cursor: not-allowed;
  display: inline-block;
  padding: 0px 8px;
  line-height: 28px;
  height: 28px;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  border: 1px solid #dcdcdc;
  color: #b5b5b5;
  background: #f5f5f5;
  border-radius: 3px;
  min-width: 78px;
  text-align: center;
}
.btn_active {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  // min-width: 60px;
  border: 1px solid #05b75d;
  box-sizing: border-box;
  background-color: #fff;
  color: #666;
  font-size: 14px;
  border-radius: 3px;
  text-align: center;
}

.btn_active:after {
  content: '';
  height: 0;
  border: solid transparent;
  position: absolute;
  border-width: 9px;
  border-top-color: #05b75d;
  border-right-color: #05b75d;
  top: 0px;
  right: 0px;
}

.btn_active::before {
  content: '';
  width: 6px;
  height: 9px;
  position: absolute;
  right: 2px;
  bottom: 18px;
  z-index: 1;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.yhqx-btn {
  height: 28px;
  background-color: #f3f9ff;
  border-radius: 3px;
  border: solid 1px #cad6e6;
  &.is-disabled {
    background-color: #f3f9ff;
    border: solid 1px #cad6e6;
  }
  .btn-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    &.role {
      background: url('@/assets/images/role.png') no-repeat;
    }
    &.qingkong {
      background: url('@/assets/images/qingkong.png') no-repeat;
    }
    &.add {
      background: url('@/assets/images/add.png') no-repeat;
    }
    &.copy {
      background: url('@/assets/images/copy.png') no-repeat;
    }
    &.jc {
      background: url('@/assets/images/jc.png') no-repeat;
    }
    &.save {
      background: url('@/assets/images/save.png') no-repeat;
    }
    &.delete {
      background: url('@/assets/images/delete.png') no-repeat;
    }
  }
  &:not(.is-disabled):hover {
    .role {
      background: url('@/assets/images/role-active.png') no-repeat;
    }
    .qingkong {
      background: url('@/assets/images/qingkong-active.png') no-repeat;
    }
    .add {
      background: url('@/assets/images/add-active.png') no-repeat;
    }
    .copy {
      background: url('@/assets/images/copy-active.png') no-repeat;
    }
    .jc {
      background: url('@/assets/images/jc-active.png') no-repeat;
    }
    .save {
      background: url('@/assets/images/save-active.png') no-repeat;
    }
    .delete {
      background: url('@/assets/images/delete-active.png') no-repeat;
    }
  }
}
</style>
